<template>
    <div>
      <!-- 头部导航 -->
      <el-row class="top">
        <el-col :span="2"><div class="grid-content bg-purple" @click="home">网站首页</div></el-col>
        <el-col :span="15"><div class="grid-content bg-purple-light" @click="home">鲜花网站</div></el-col>
        <el-col :span="2"><div class="grid-content bg-purple" @click="goto">退出登录</div></el-col>
        <el-col :span="2"><div class="grid-content bg-purple-light" @click="admin">admin</div></el-col>
        <el-col :span="2"><div class="grid-content bg-purple-light">购物车</div></el-col>
      </el-row>
  
      <!-- 购物清单 -->
      <div class="title">
        <div class="p">购物清单</div>
        <div class="spxx">
          <el-checkbox v-model="checkAll"></el-checkbox>
          <div class="xx">
            <span>商品信息</span>
            <div class="right">
              <div>单价</div>
              <div>数量</div>
              <div>小计</div>
              <div>删除</div>
            </div>
          </div>
        </div>
        <!-- 每一个商品 -->
        <div class="spxx" v-for="(item,index) in list" :key="index">
          <el-checkbox v-model="item.ckd"></el-checkbox>
          <div class="xx">
            <span><img :src=" item.item.url" width="100px" height="100px"></span>
            <div class="right">
              <div>￥{{ item.item.price}}</div>
              <div>
                <el-input-number @change="changeNum(item.num)" :min="1" size="mini" v-model="item.num"></el-input-number>
              </div>
              <div>￥{{ item.item.price*item.num }}</div>
              <div class="delete" @click="del(index)">删除</div>
            </div>
          </div>
        </div>
  
        <div class="bottom" style="float:right">
          <span>总计 <a class="a">{{ $store.getters.number }}</a></span>
          <span>应付金额 <a class="a">{{ $store.getters.total }}</a></span>
          <el-button type="primary" @click="dels">现在结算</el-button>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import {mapMutations} from 'vuex'
    export default{
      name:"shoppingcart",
      data(){
        return {
          num: 1,   //商品数量
          price:165,    //商品价格
          list: this.$store.state.cartList,   // 购物车数据
        }
      },
      computed:{
        checkAll:{
          get(){
            if (this.list.length == 0) {
              return false
            }
            return this.$store.state.cartList.every(item => {
              return item.ckd == true
            })
          },
          set(newVal) {
            this.$store.commit('ckd', newVal)
          },
        }
      },
      methods:{
        /* 向shop组件跳转 */
        home(){
          this.$router.push('/shop')
        },
        /* 向admin组件跳转 */
        admin(){
          this.$router.push('/admin')
        },
        /* 退出登录事件 */
        goto(){
          this.$confirm('是否退出登录？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$message({
              type: 'success',
              message: '退出成功!',
            });
            this.$router.push('/')
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '取消退出'
            });
          });
        },
        /* 删除商品事件 */
        del(index) {
        this.$confirm('是否删除该商品？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!',
          });
          this.$store.commit('del', index)
        }).catch(() => {
  
        });
      },
      /* 结算商品事件 */
      dels(){
        this.$confirm('是否结算全部商品？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '结算成功!',
          });
          this.$store.commit('dels',0)
        }).catch(() => {
  
        });
      },
      ...mapMutations(['changeNum'])
      },
    }
  </script>
  
  <style scoped>
    .top{
      height: 40px;
      background: rgb(191, 124, 138);
      color: #ffe9ec;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .title{
      margin: 40px;
      border: 1px solid #000;
      border-radius: 10px;
    }
    .p{
      padding: 20px 20px 10px 20px;
    }
    .spxx{
      padding: 5px 20px;
      font-size: 14px;
      display: flex;
      align-items: center;
      /* background: rgb(71,191,132); */
    }
    .xx{
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
    .xx span{
      margin-left: 50px;
    }
    .right{
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .right div{
      display: flex;
      justify-content: center;
      width: 120px;
      height: 40px;
    }
    .delete{
      color: #b38590;
    }
    .youhui{
      padding: 10px 20px;
    }
    .youhui button{
      border-radius: 5px;
      margin-left: 10px;
    }
    .a{
      color: red;
    }
    .bottom{
      display: flex;
      justify-content: right;
      align-items: center;
      padding: 0 60px 20px 0;
    }
    .bottom span{
      margin-right: 20px;
    }
  </style>